<div *tmIsLoading="isLoading">
  <div class="card bg-light mx-auto" style="max-width: 800px;" *ngIf="!hasJoined && !userId && validUrl">
    <div class="card-header bg-warning">
      <h1 class="mb-0 h3">Not logged in</h1>
    </div>
    <div class="card-body">
      You are not logged in. Please log in first.
    </div>
  </div>
  <div class="card bg-light mx-auto" style="max-width: 800px;" *ngIf="userId && (!validUrl || hasJoined)">
    <div class="card-header bg-warning">
      <h1 class="mb-0 h3">Invalid course join link</h1>
    </div>
    <div class="card-body" *ngIf="!validUrl">
      The course join link is invalid. You may have entered the URL incorrectly or the URL may correspond
      to a/an {{ entityType }} that does not exist.
    </div>
    <div class="card-body" *ngIf="hasJoined && validUrl">
      The course join link has been used and is no longer valid.
    </div>
  </div>
  <div class="card bg-light mx-auto" style="max-width: 800px;" *ngIf="!hasJoined && userId && validUrl">
    <div class="card-header bg-primary text-white">
      <h1 class="mb-0 h3">Confirm your Google account</h1>
    </div>
    <div class="card-body">
      You are currently logged in as <strong id="user-id">{{ userId }}</strong>.
      <br>If this is not you, please log out and log in using your own Google account.
      <br>If this is you, please confirm below to complete your registration.<br>
      <div class="text-center" style="margin-top: 20px;">
        <button id="btn-confirm" class="btn btn-success" (click)=" isCreatingAccount ? createAccount() : joinCourse()">Register for course</button>
      </div>
    </div>
  </div>
</div>
